<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="test">
    <App>
    </App>
    <App/><!-- 也有问题 -->
    <my-other></my-other>
    <!-- <MyOther></MyOther> -->  <!-- 有问题 -->
  </div>

  <script src="../js/vue.js"></script>
  <script>
    /* 
1. 定义组件
    语法: Vue.extends(options)
    options与new Vue一样配置, data/template/methods/computed/watch, 但没有el
    组件本质是一个函数VueComponent, 不同组件对应不同的组件函数
    组件的实例是在渲染组件标签时内部自动创建, 不需要我们去手动创建
    当写一个组件多个标签时, 就会产生多个组件实例
        const a1 = new VueComponent()
        const a2 = new VueComponent()

        data是对象: 
          a1._data = options.data
          a2._data = options.data
          问题: 这个组件的多个实例, 共用一个data对象, 一旦更新数据, 多个界面都会更新(不可以这样)
        data是函数:
          a1._data = options.data()
          a2._data = options.data()
          这个组件的多个实例, 都有自己的data对象, 相互不影响  对的
    组件内部只能有一个根标签

2. 注册组件
    局部注册: 通过compnents配置注册 
    components: {
      组件标签名: 组件函数
    }
3. 写组件标签
    <组件标签名></组件标签名>
    */


    // 定义一个vue组件
    const App = Vue.extend({
      name: 'APP', // vue调试工具显示组件标签名
      template: `
        <div>
          <h2 @click="update">count: {{count}}</h2>
          <span>abc</span>  
        </div>
      `,
      data () { // 必须是函数
        return {
          count: 1
        }
      },
      methods: {
        update () {
          this.count++
        }
      }
    })

    const Other = Vue.extend({
      name: 'Other',
      template: '<p>Other组件</p>'
    })
    console.log(Other)

    console.log(App)  // 组件构造函数

    new Vue({
      el: "#test",
      data: {

      },
      // 注册组件
      components: {
        App,
        MyOther: Other
      }
    })
  </script>
</body>
</html>